<div [@routerTransition]>
  <nz-spin [nzTip]="l('Registering')" [nzSpinning]="saving">
    <nz-card [nzTitle]="nzTitle" nzHoverable='true'>
      <ng-template #nzTitle>
        <div class="text-center magicodes__block">
          <i class="anticon anticon-login"></i>
          <span>{{l('TenantRegister')}}</span>
          <span class="CodeMirrir-linenumber"></span>.
          <nz-form-extra>请注意，租户编码具备唯一性，不可重复</nz-form-extra>

        </div>
      </ng-template>

      <form nz-form #validateForm="ngForm" (ngSubmit)="save()" autocomplete="off">

        <br>

        <!-- 租户名称 /Code -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-cloud">
              <input nz-input type="text" name="tenancyName" #tenancyName="ngModel" [(ngModel)]="model.tenancyName"
                [placeholder]="l('TenancyCodeName')" required expression="^[a-zA-Z][a-zA-Z0-9_-]{1,}$">
            </nz-input-group>
            <nz-form-explain *ngIf="tenancyName.control.dirty&&tenancyName.control.errors">
              <ng-container *ngIf="tenancyName.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
              <ng-container *ngIf="tenancyName.control.hasError('expression')">{{l('ExpressionCheckFailed')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->


        <!-- 租户名称 -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="displayTenancyName" #displayTenancyNameInput="ngModel" [(ngModel)]="model.name"
                [placeholder]="l('DisplayTenancyName')" required maxlength="32">
            </nz-input-group>
            <nz-form-explain *ngIf="displayTenancyNameInput.control.dirty&&displayTenancyNameInput.control.errors">
              <ng-container *ngIf="displayTenancyNameInput.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->

        <!-- 管理员账号（可空） -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-user">
              <input nz-input name="adminUserName" #adminUserNameInput="ngModel" [(ngModel)]="model.userName"
                [placeholder]="l('AdminUserName')" required maxlength="32">
            </nz-input-group>
            <nz-form-explain *ngIf="adminUserNameInput.control.dirty&&adminUserNameInput.control.errors">
              <ng-container *ngIf="adminUserNameInput.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->

        <!-- 管理员邮箱 -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-mail">
              <input nz-input type="email" name="adminEmailAddress" #adminEmailAddress="ngModel" [(ngModel)]="model.adminEmailAddress"
                [placeholder]="l('AdminEmailAddress')" required email>
            </nz-input-group>
            <nz-form-explain *ngIf="adminEmailAddress.control.dirty&&adminEmailAddress.control.errors">
              <ng-container *ngIf="adminEmailAddress.control.hasError('email')">{{l('NotEmail')}}</ng-container>
              <ng-container *ngIf="adminEmailAddress.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->

        <!-- 管理员密码 -->
        <!-- <nz-form-item>
          <nz-form-control nzHasFeedback>
            <nz-input-group nzPrefixIcon="anticon anticon-lock">
              <input nz-input type="password" name="tenantAdminPassword" #tenantAdminPassword="ngModel" [(ngModel)]="model.tenantAdminPassword"
                [placeholder]="l('Password')" required maxlength="32" minlength="6">
            </nz-input-group>
            <nz-form-explain *ngIf="tenantAdminPassword.control.dirty&&tenantAdminPassword.control.errors">
              <ng-container *ngIf="tenantAdminPassword.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
              <ng-container *ngIf="tenantAdminPassword.control.hasError('minlength')">{{l('MinLength')}}</ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->

        <!-- 验证码 -->
        <!-- <nz-form-item *ngIf="useCaptcha">
          <nz-form-control>
            <magicodes-captcha #captcha name="verificationCode" #verificationCodeInput="ngModel" [(ngModel)]="model.verificationCode"
              [placeholder]="l('CAPTCHA')" [type]="captchaType" [key]="model.tenancyName" (keyup)="onKey($event)"
              required [minlength]="captchaLength" [maxlength]="captchaLength">
            </magicodes-captcha>

            <nz-form-explain *ngIf="verificationCodeInput.control.dirty&&verificationCodeInput.control.errors">
              <ng-container *ngIf="verificationCodeInput.control.hasError('required')">{{l('ThisFieldIsRequired')}}</ng-container>
              <ng-container *ngIf="verificationCodeInput.control.hasError('minlength')||verificationCodeInput.control.hasError('maxlength')">
                {{l('LengthError')}}
              </ng-container>
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->


        <!-- 功能按钮 -->
        <!-- <button nz-button [nzType]="'primary'" [nzLoading]="saving" class="magicodes__block" type="submit" [disabled]="!validateForm.valid||saving">
          <i class="anticon anticon-login"></i>
          <span>{{l("Register")}}</span>
        </button> -->
      </form>

      <nz-form-item>
        <nz-col [nzSpan]="12">
        </nz-col>
        <nz-col [nzSpan]="12" class="text-right">
          <a (click)="back()">{{l("Back")}}</a>
        </nz-col>
      </nz-form-item>

      <p class="register-protocal" style="margin-top: 24px;">点击“注册”，即代表你同意<a href="/" target="_blank">《服务协议》</a></p>
    </nz-card>
  </nz-spin>
</div>
